<template>
	<div class="subject_container">
		<template v-if="type === '1'">
			<template v-if="subjectList.length > 0">
				<div class="item" v-for="(item, index) in subjectList" :key="item.id" :data-id="item.id">
					<div class="name" v-html="returnSubjectTitle(item)" />
					<span class="label">分值</span>
					<el-input size="mini" maxlength="3" v-model="item.score" />
					<el-button type="text" icon="el-icon-view" @click.stop="handleLookSubject(item)"></el-button>
					<el-button type="text" icon="el-icon-delete" @click.stop="handleDeleteSubject(index)"></el-button>
				</div>
			</template>
			<el-empty class="filtered" :image-size="72" description="暂无题目" v-else></el-empty>
		</template>
		<template v-else-if="type === '2'">
			<el-row :gutter="20" class="form" v-for="(item, index) in subjectList" :key="index">
				<el-col :span="24">
					<span class="label">题库：</span>
					<el-select size="small" v-model="item.ruleVo.bankIds" clearable multiple placeholder="请选择题库">
						<el-option v-for="(n, i) in topicLibraryData" :key="i" :label="n.name" :value="n.id" />
					</el-select>
				</el-col>
				<el-col :span="6">
					<span class="label">题型：</span>
					<el-select size="small" v-model="item.ruleVo.subjectType" clearable placeholder="请选择题型">
						<el-option v-for="(n, i) in subjectTypes" :key="i" :label="n.label" :value="n.value" />
					</el-select>
				</el-col>
				<el-col :span="6">
					<span class="label">难度：</span>
					<el-select size="small" v-model="item.ruleVo.subjectDifficulty" clearable placeholder="请选择难度">
						<el-option v-for="(n, i) in subjectDifficultys" :key="i" :label="n.label" :value="n.value" />
					</el-select>
				</el-col>
				<el-col :span="6">
					<span class="label">题目数量：</span>
					<el-input-number size="small" v-model="item.ruleVo.subjectNum" controls-position="right" :min="0" />
				</el-col>
				<el-col :span="6">
					<span class="label">单题分值：</span>
					<el-input-number size="small" v-model="item.ruleVo.score" controls-position="right" :min="0" />
				</el-col>
			</el-row>
		</template>
	</div>
</template>

<script>
	import Sortable from 'sortablejs';
	import { subjectType, subjectDifficulty } from '@/utils/subjectData';
	export default {
		inject: ['subjectBanks'],
		props: {
			value: { type: Array, default: () => [] },
			type: { type: String, default: '' }
		},
		data() {
			return {
				subjectList: this.value,
				subjectSortable: null
			};
		},
		computed: {
			subjectTypes() {
				return subjectType;
			},
			subjectDifficultys() {
				return subjectDifficulty;
			},
			topicLibraryData() {
				return this.subjectBanks();
			}
		},
		watch: {
			value(arr) {
				this.subjectList = arr;
			},
			subjectList(arr) {
				this.$emit('input', arr);
				console.log(arr);
			},
			type(val) {
				this.subjectList = [];
				if (val === '1') {
					this.initSubjectSortable();
				} else if (val === '2') {
					this.destroySubjectSortable();
					this.subjectList = this.addedRandomData();
				}
			}
		},
		mounted() {
			if (this.type === '1') {
				this.initSubjectSortable();
			} else if (this.type === '2') {
				if (this.subjectList.length > 0) return false;
				this.subjectList = this.addedRandomData();
			}
		},
		destroyed() {
			this.destroySubjectSortable();
		},
		methods: {
			addedRandomData() {
				let ruleVo = { score: 0 }
				ruleVo['subjectNum'] = 0;
				ruleVo['subjectType'] = '';
				ruleVo['subjectDifficulty'] = '';
				return [{ orderBy: 1, ruleVo }];
			},
			destroySubjectSortable() {
				if (!this.subjectSortable) return false;
				this.subjectSortable.destroy();
				this.subjectSortable = null;
			},
			initSubjectSortable() {
				this.subjectSortable = new Sortable(this.$el, {
					animation: 150,
					filter: '.filtered',
					onEnd: this.refreshSubjectSort
				});
			},

			returnSubjectTitle(data) {
				let title = data.testSubjects?.title || '';
				return this.$removeEmptyTag(this.$cleanStyle(title));
			},

			handleLookSubject(data) {
				this.$bus.$emit('lookSubject', data.id);
			},

			//删除选中试题
			handleDeleteSubject(index) {
				this.subjectList.splice(index, 1);
			},

			refreshSubjectSort(evt) {
				let sortedIds = this.subjectSortable.toArray();
				this.subjectList = sortedIds.map((id) => {
					return this.subjectList.find((n) => n.id === id);
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.subject_container {
		.item::v-deep {
			display: flex;
			border-radius: 4px;
			padding-right: 10px;
			align-items: center;
			border: solid 1px #ebeef5;
			background-color: #f2f6fc;
			margin-top: 10px;

			&:first-child {
				margin-top: 0;
			}

			.name {
				flex: 1;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 1;
				user-select: none;
				line-height: 20px;
				overflow: hidden;
				padding: 10px;
				height: 20px;
				cursor: move;
			}

			span.label {
				color: #606266;
			}

			.el-input {
				width: 48px;
				margin: 0 10px;
				font-size: 14px;
			}

			.el-input__inner {
				padding: 0 10px;
				text-align: center;
			}

			.el-button {
				padding: 6px 0;
			}
		}

		.el-row.form {
			.el-col {
				display: flex;
				align-items: center;
				margin-top: 10px;

				&:first-child {
					margin-top: 0;
				}
			}

			span.label {
				flex-shrink: 0;
				font-weight: bold;
				font-size: 15px;
				color: #606266;
			}
		}
	}
</style>